import React, { Component } from 'react';
import {Form,Input,Select } from 'antd';
import './modal.css'; 
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {reqAllMb} from '../../api';

const { Option } = Select;



class AddFolderForm extends Component {
  state={
    mbList: []   
  }

  static propTypes = {
    setForm: PropTypes.func.isRequired,
  }

  formRef = React.createRef();

  handleChange = (value) => {
    console.log(`selected ${value}`);
  }

  getAllMb = async() => {
    const result = await reqAllMb();
    //console.log("mb11",result);
    if(result.code === 200){
      const mbList = result.data;
      console.log("mb",mbList);
      this.setState({
        mbList
      })
    }  
  } 
    
  componentDidMount() {
    this.props.setForm(this.formRef);  // 调用父组件传递的函数，目的是将 参数以实参的形式传递给父组件  
  }
  componentWillMount(){
    this.getAllMb();
  }

  render() {
    return (
      <div className="add-folder-form">
        <Form 
          ref={this.formRef}   
          name="control-ref" 
          onFinish={this.onFinish}  
        >    
            <Form.Item 
              name="mb_id" 
              label="选择模板:"
              rules={[{ required: true }]}
              style={{width:'100%'}}
            >
               <Select placeholder="请选择模板"  onChange={this.handleChange}>   {/*defaultValue="mb1" */}
                {this.state.mbList.map((item) => <Option value={item.mb_id}>{item.mb_name}</Option>)}
              </Select>
            </Form.Item>
        </Form>
      </div> 
    )
  }
}

export default connect(
  state => ({user: state.user}),
  {}
)(AddFolderForm);